本日進度 Day16

終於做到這步了，這次利用的是 nz-table 跟 nz-popconfirm
直接在 table 上進行增刪改查

要注意的是這裡的 nz-table 用的是 OnPush 模式，所以直接修改（mutate）通過@Input()傳入的數據對象不會觸發變更檢測。

所以應該使用"immutable"（不可變）的方式。創建新的數組或對象，而不是直接修改現有的，畫面上才會有變化。

app-storage-modal.component.ts

import { Component } from '@angular/core';

interface ItemData {
  id: string;
  name: string;
  count: number;
  unitName: string;
  memo: string;
}
@Component({
  selector: 'app-storage-modal',
  templateUrl: './storage-modal.component.html',
  styleUrls: ['./storage-modal.component.scss']
})
export class StorageModalComponent {
  editCache: { [key: string]: { edit: boolean; data: ItemData } } = {};
  listOfData: ItemData[] = [
    { id: '0', name: '衛生紙', count: 5, unitName: '大包', memo: '在第一、二層，從app看不要一直問我(模仿家人溝通情境)' },
    { id: '1', name: '濕式衛生紙', count: 1, unitName: '盒', memo: '第三層' },
    { id: '2', name: '廚房紙巾', count: 1, unitName: '大包', memo: '第三層' },
    { id: '3', name: '工具箱', count: 1, unitName: '箱', memo: '第四層' },

  ];
  ngOnInit(): void {
    this.updateEditCache();
  }
  add() {
    this.listOfData=[
      ...this.listOfData,
      { id: '6', name: '', count: 0, unitName: '個', memo: '' }
    ]
    this.updateEditCache();
    console.log(this.listOfData);
    console.log(this.editCache);
    this.startEdit('6');
  }

  startEdit(id: string): void {
    this.editCache[id].edit = true;
  }

  cancelEdit(id: string): void {
    const index = this.listOfData.findIndex(item => item.id === id);
    this.editCache[id] = {
      data: { ...this.listOfData[index] },
      edit: false
    };
  }

  deleteRow(id: string): void {
    this.listOfData = this.listOfData.filter(d => d.id !== id);
  }

  saveEdit(id: string): void {
    const index = this.listOfData.findIndex(item => item.id === id);
    Object.assign(this.listOfData[index], this.editCache[id].data);
    this.editCache[id].edit = false;
  }

  updateEditCache(): void {
    this.listOfData.forEach(item => {
      this.editCache[item.id] = {
        edit: false,
        data: { ...item }
      };
    });
  }

}

app-storage-modal.component.html

<app-default-modal [name]="'收納明細'">

    <button nz-button (click)="add()"><span nz-icon nzType="plus" nzTheme="outline"></span></button>
    <nz-table #editRowTable nzBordered [nzData]="listOfData" nzTableLayout="fixed">
        <thead>
            <tr>
                <th nzWidth="20%">物品名</th>
                <th nzWidth="8%">數量</th>
                <th nzWidth="15%">單位</th>
                <th nzWidth="40%">備註</th>
                <th nzWidth="15%">Action</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of editRowTable.data">
                <ng-container *ngIf="!editCache[data.id].edit; else editTemplate">
                    <td>{{ data.name }}</td>
                    <td>{{ data.count }}</td>
                    <td>{{ data.unitName }}</td>
                    <td>{{ data.memo }}</td>
                    <td>
                        <div class="d-flex justify-content-around">
                            <span nz-icon nzType="edit" nzTheme="outline" (click)="startEdit(data.id)"></span>
                            <span nz-icon nzType="delete" nzTheme="outline" (click)="deleteRow(data.id)"></span>
                        </div>
                    </td>
                </ng-container>
                <ng-template #editTemplate>
                    <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.name" /></td>
                    <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.count" /></td>
                    <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.unitName" /></td>
                    <td><input type="text" nz-input [(ngModel)]="editCache[data.id].data.memo" /></td>
                    <td>
                        <a nz-popconfirm nzPopconfirmTitle="Sure to save?" (nzOnConfirm)="saveEdit(data.id)"
                            class="save">Save</a>
                        <a nz-popconfirm nzPopconfirmTitle="Sure to cancel?"
                            (nzOnConfirm)="cancelEdit(data.id)">Cancel</a>
                    </td>
                </ng-template>
            </tr>
        </tbody>
    </nz-table>
</app-default-modal>